<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue">
        <div class="order-t">订单编号：{{order.order_sn}}</div>
        <div class="bg-f aui-padded-t-5 aui-padded-b-15">
            <div class="order-t1">订单详情</div>
            <ul class="order-list">
                <li>
                    <div class="order-left">发货姓名</div>
                    <div class="order-right">
                        <div class="fl">{{order.info.sender}}</div>
                        <!-- <a href="javascript:;" class="order-phone" @click="call(order.info.sender_phone)"></a> -->
                    </div>
                </li>
                <li>
                    <div class="order-left">发货地址</div>
                    <div class="order-right">{{order.info.sender_province}}{{order.info.sender_city}}{{order.info.sender_district}}{{order.info.sender_town}}{{order.info.sender_address}}</div>
                </li>
                <li>
                    <div class="order-left">收货地址</div>
                    <div class="order-right">{{order.info.consignee_province}}{{order.info.consignee_city}}{{order.info.consignee_district}}{{order.info.consignee_town}}{{order.info.consignee_address}}</div>
                </li>
                <li>
                    <div class="order-left">收货人</div>
                    <div class="order-right">
                        <div class="fl"><span class="aui-margin-r-10">{{order.info.consignee}}</span>{{order.info.consignee_phone}}</div>
                        <a href="javascript:;" class="order-phone" @click="call(order.info.consignee_phone)"></a>
                    </div>
                </li>
                <li>
                    <div class="order-left">取货时间</div>
                    <div class="order-right">{{order.get_goods_time}}</div>
                </li>
                <li>
                    <div class="order-left">物品信息</div>
                    <div class="order-right">{{order.info.goods_type}}<span class="aui-margin-5">/</span>{{order.info.goods_value}}<span class="aui-margin-5">/</span>{{order.info.goods_weight}}</div>
                </li>
                <li>
                    <div class="order-left">物品照片</div>
                    <div class="order-right" v-if="order.info.goodsPicsThumb.length">
                        <img :src="item" v-for="(item,index) in order.info.goodsPicsThumb" @click="showBig(index,order.info.goodsPicsThumb)">
                    </div>
                    <div class="order-right" v-else>无</div>
                </li>
            </ul>
        </div>
        <ul class="pay-list aui-margin-t-15">
            <li class="c-3">
                <div class="fl">费用说明 </div>
                <div class="fr">{{order.info.status_desc}} </div>
            </li>
            <li>
                <div class="fl">跑腿费</div>
                <div class="fr">￥{{order.pay_amount}}</div>
            </li>
            <li>
                <div class="fl">优惠券</div>
                <div class="fr">￥{{order.coupon_fee}}</div>
            </li>
        </ul>
        <!-- <div class="pay-b" v-if="order.status==0">
            <div class="pay-text1">距离{{order.distance}}公里，{{order.estimated_time}}。</div>
            <div class="pay-text2">￥{{order.pay_amount}}</div>
            <a href="javascript:;" class="aui-btn aui-btn-info pay-btn" @click="pay">支付</a>
        </div> -->
        <div class="hei4"></div>
        <div id="loading"></div>
    </div>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript">
        apiready = function() {

            api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#eee',
                textColor: '#333',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                api.execScript({
                    script: 'reloadGetOrder()'
                });
            });

            var photoBrowser = api.require('photoBrowser');
            vObj = new Vue({
                el: ".vue",
                data: {
                    order: api.pageParam.order
                },
                methods: {
                    call: function(tel) {
                        api.call({
                            type: 'tel',
                            number: tel
                        });
                    },
                    showBig: function(index, items) {
                        photoBrowser.open({
                            images: items,
                            activeIndex: index,
                            placeholderImg: 'widget://res/img/apicloud.png',
                            bgColor: '#000'
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.eventType == "click") {
                                    photoBrowser.close();
                                }
                            } else {
                                app.error(JSON.stringify(err));
                            }
                        });
                    }
                }
            });

            app.request.finish(vObj);

            app.addEventListener('orderDetailRefreshHeaderInfo', function(ret, err) {
                vObj.order = ret.value;
                api.refreshHeaderLoadDone();
            });
        }
    </script>
</body>

</html>
